<template>
  <div class="month-follow-model">
    <title-bar ref="titlebar" :bar-title='titleText'></title-bar>
    <ECharts ref="lineBar" v-if="init" :options="option" eclass="echart" :resize="resize"></ECharts>
  </div>
</template>
<script>
  import TitleBar from './title-bar'
  import ECharts from '../components/ECharts'
  import Q from 'q'

  require('echarts/lib/chart/line')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/tooltip')

  export default {
    props: {
      followData: {
        type: Object
      },
      calendar: {
        type: String,
        default:0
      }
    },
    watch: {
        followData () {
          this.refactData().then(this.ajustLegend)
        }
    },
    components: {
      TitleBar,
      ECharts
    },
    methods: {
      refactData () {
        if(this.calendar === '6' || this.calendar === '7'){
            this.titleText = "周跟进分析"
        }
        if((this.calendar === '4' || this.calendar === '5') && this.titleText !== '月跟进分析'){
            this.titleText = "月跟进分析"
        }
        return Q.Promise((resolve, reject) => {
          this.init = false
          if(this.followData.data.length < 1){

          }
          this.option.legend.data = this.followData.source_names
          this.option.series = this.followData.data
          this.option.tooltip.formatter = (params) => {
//            console.log(params)
            var res = params[0].name + '<br/>';
              for(let i = 0; i<params.length;i++){
              res += params[i].marker + params[i].seriesName + '<br/><div style="margin-left: 14px">总:' + this.followData.total[i] + ',跟:'+ this.followData.data_total[i].data[params[i].dataIndex] + ',比:' + params[i].data + '%' + '<br/></div>'
            }
            return res
          }
          this.resize = !this.resize
          resolve()
        }).then(this.showEchart)
      },
      showEchart() {
       return Q.Promise((resolve, reject) => {
         setTimeout(() => {
           this.init = true
           setTimeout(() => {
             resolve()
           })
         })
       })
      },
      ajustLegend () {
        return Q.Promise((resolve, reject) => {
          let componentViews = this.$refs['lineBar'].chart._componentsViews
//          console.log(componentViews, this.$refs['lineBar'].chart, 'componentViewstest')
          if (componentViews && componentViews.length) {
            componentViews.forEach((extendClass, index) => {
              if (extendClass.type.indexOf('legend') > -1) {
                let legendExtendClass = extendClass
//                console.log('legendExtendClass', legendExtendClass, legendExtendClass._backgroundEl.shape.height)
                this.option.grid.top = legendExtendClass._backgroundEl.shape.height + 10
//                console.log(this.option.grid.top, 'legendExtendClass._backgroundEl.shape.height')
                this.refactData().then(resolve)
              }
            })
          } else {
              resolve()
          }

        })
      }
    },

    data () {
      return {
        init: true,
        titleText:'月跟进分析',
        resize: false,
        option: {
          tooltip: {
            trigger: 'axis',
//            confine: true
          },
          legend: {
            data:[],
//            width:350
            padding:[
              10,  // 上
              0, // 右
              0,  // 下
              0, // 左
            ]
          },
          grid: {

          },
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          calculable: true,
          xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: ['2小时','4小时','24小时','48小时','1周内','2周内'],

          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}%',
              interval:0,
//              rotate:40
            },
            offset:5
          },
          series: []
        }
      }
    },
    mounted () {
    }
  }
</script>
<style lang="less">
  .month-follow-model {
    min-height: 200px;
    .echart {
      min-height: 300px;
      width: 106%;
    }
  }
</style>
